<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .bk {
      width: 100vw;
      height: 100vh;
      /* background-color: black; */
    }
    .base {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* background-color: #123; */
    }
    .eyeright {
      width: 300px;
      height: 300px;
      background-color: #fff;
      transform: rotate(35deg);
      border-radius: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 眼角 */
      border-radius: 80% 5% 80% 8%;
      overflow: hidden;
      border: 3px solid #000;
      box-shadow: 0px 15px 35px -5px rgb(32, 32, 32);
    }
	/* 眨眼 */
	.blink{
		animation: 0.5s blink 1 ease-in-out reverse;
	}
    @keyframes blink {
      0% {
        height: 300px;
        transform: rotate(35deg);
      }
      100% {
        height: 0px; /* 眼睛闭合状态 */
        transform: rotate(-10deg);
      }
    }
    .closeEyes {
      width: 300px;
      height: 0;
      background-color: #fff;
      transform: rotate(-10deg);
      border-radius: 25px;
      /* 眼角 */
      border-radius: 80% 5% 80% 8%;
      border: 3px solid #000;
      box-shadow: 0px 15px 35px -5px rgb(32, 32, 32);
    }
    .normal {
      /* background-color: red; */
      background-color: #050505ef;
      border: 5px solid #000;
      border-radius: 50%;
      height: 200px;
      width: 200px;
      /* overflow: hidden; */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transform: rotate(-35deg);
      transition: 1s ease;
      z-index: 100;
    }
    .getRed {
      animation: 0.5s getRed 1 ease-in-out reverse;
    }
    /* 变红动画 */
    @keyframes getRed {
      0% {
        background-color: #050505ef;
      }
      100% {
        background-color: red;
      }
    }
    .white {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      left: 120px;
      top: 14px;
      z-index: 100;
    }
    .black {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
      z-index: 100;
    }
    .dashedLine {
      width: 120px;
      height: 120px;
      position: absolute;
      border: 1.6px dashed black;
      border-radius: 50%;
      position: absolute;
    }
    /* 旋转动画 */
    @keyframes round {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(-90deg);
      }
      50% {
        transform: rotate(-180deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }
    /* 透明放大动画 */
    @keyframes touming {
      0% {
        transform: rotate(0deg) scale(0);
        opacity: 0;
      }
      25% {
        transform: rotate(-90deg) scale(0.25);
        opacity: 0.25;
      }
      50% {
        transform: rotate(-180deg) scale(0.5);
        opacity: 0.5;
      }
      100% {
        transform: rotate(-360deg) scale(1);
        opacity: 1;
      }
    }

    /* 勾玉 */
    .magatama {
      width: 120px;
      height: 120px;
      position: relative;
      transition: 0.7s ease;
      /* animation: 1s touming 1 linear; */
      /* animation: 10s round infinite linear; */
    }
    .magatama .dot {
      width: 20px;
      height: 20px;
      background-color: black;
      border-radius: 50%;
      position: absolute;
      display: none;
    }
    .magatama .dot::after {
      content: "";
      position: absolute;
      top: -5px;
      left: -0px;
      width: 6px;
      height: 18px;
      border-radius: 50%;
      border-left: 6px solid black;
      z-index: 500;
    }
    .magatama .dot:nth-of-type(1) {
      left: 42%;
      top: -10px;
      transform: rotate(30deg);
    }
    .magatama .dot:nth-of-type(2) {
      bottom: 20px;
      left: -2px;
      transform: rotate(250deg);
    }
    .magatama .dot:nth-of-type(3) {
      bottom: 20px;
      right: -2px;
      transform: rotate(170deg);
    }
    /* 万花筒 */
    .mangekyou {
      /* background: #050505;
             border: 5px #000 solid;
             border-radius: 50%;
             height: 200px;
             width: 200px;
             overflow: hidden;
             box-shadow: inset 0 0 30px #231e1f;
             animation: 10s round infinite linear; */
    }
  </style>
  <body>
    <div class="bbb"></div>
    <div class="bk">
      <div class="base">
        <!-- <div class="closeEyes"></div> -->
        <div class="eyeright blink">
          <div class="normal">
            <div class="white">
              <!-- 留白 -->
            </div>
            <div class="black">
              <!-- 黑瞳 -->
            </div>
            <div class="dashedLine">
              <!-- 眼线 -->
            </div>
            <!-- 勾玉 -->
            <div class="magatama">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>

          <!-- <div class="mangekyou">
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="flower"></div>
            <div class="circle"></div>
          </div> -->
        </div>
      </div>
    </div>

    <script>
	
      // 1.普通-->单勾玉-->双勾玉-->三勾玉-->万花筒-->永恒
      // 2.进入眨眼
      // 3.按钮功能-->闭眼转圈

      let eyeright = document.getElementsByClassName("eyeright")[0]; //眼睛
      let normal = document.getElementsByClassName("normal")[0]; //黑眼
      let magatama = document.getElementsByClassName("magatama")[0]; //3勾玉
      let dot = document.querySelectorAll(".magatama .dot"); //逗号


	  //眨眼函数
      let blink = (time) => {
        setTimeout(() => {
          eyeright.classList.remove("blink");
        }, time);
        setTimeout(() => {
          eyeright.classList.add("blink");
        }, time + 1000);
      };
      //1500 眨眼
      blink(1500);

      //2500 变红
      setTimeout(() => {
        normal.style.background = "red";
        magatama.style.animation = "1s touming 1 linear";
        dot[0].style.display = "block";
      }, 2500);

      //单勾玉
      setTimeout(() => {
        magatama.style.animation = "10s round infinite linear";
      }, 3600);
      //双勾玉
      setTimeout(() => {
        dot[1].style.left = "42%";
        dot[1].style.bottom = "-10px";
        dot[1].style.display = "block";
      }, 4600);
      //三勾玉
      setTimeout(() => {
		// dot[1].style.cssText = '';
		// dot[1].setAttribute('style','');
		dot[1].removeAttribute('style');
        dot[1].style.display = "block";
        dot[2].style.display = "block";
      }, 5600);

	   //6000 眨眼 暂停继续
	   blink(6000);
	   setTimeout(() => {
		magatama.style.animationPlayState = 'paused';
      }, 7100);
	  setTimeout(() => {
		magatama.style.animationPlayState = 'running';
      }, 7200);
	  
    </script>
  </body>
</html>
